import React, { PureComponent } from 'react';
import {
  Drawer, Divider, Col, Row,
} from 'antd';
import * as selectOption from '../../../common/selectOption';

const pStyle = {
  fontSize: 16,
  color: 'rgba(0,0,0,0.85)',
  lineHeight: '24px',
  display: 'block',
  marginBottom: 16,
};
const DescriptionItem = ({ title, content }) => (
  <div
    style={{
      fontSize: 14,
      lineHeight: '22px',
      marginBottom: 7,
      color: 'rgba(0,0,0,0.65)',
    }}
  >
    <p
      style={{
        marginRight: 8,
        display: 'inline-block',
        color: 'rgba(0,0,0,0.85)',
      }}
    >
      {title}:
    </p>
    {content}
  </div>
);

class DrawerComponent extends PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    const { visible, onClose, descInfo } = this.props;
    return <Drawer
      width={640}
      placement="right"
      closable={true}
      onClose={() => onClose(false, [])}
      visible={visible}
    >
      <p style={{ ...pStyle, marginBottom: 24 }}>企业名称：{descInfo.enterpriseName}</p>
      <p style={pStyle}>企业基本信息</p>
      <Row>
        <Col span={12}>
          <DescriptionItem title="企业简称" content={descInfo.shortName}/>
        </Col>
        <Col span={12}>
          <DescriptionItem title="注册资本(万元)" content={descInfo.capital}/>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <DescriptionItem title="组织机构代码" content={descInfo.organizationNumber}/>
        </Col>
        <Col span={12}>
          <DescriptionItem title="登记注册号" content={descInfo.registrationNumber}/>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <DescriptionItem title="税务登记证号类型" content={descInfo.taxType === 1 ? '地税' : '国税'}/>
        </Col>
        <Col span={12}>
          <DescriptionItem title="税务登记证号" content={descInfo.taxNumber}/>

        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <DescriptionItem title="经营地址" content={descInfo.address}/>
        </Col>
        <Col span={12}>
          <DescriptionItem title="企业特征" content={
            selectOption.enterpriseCharacter.map((l) => {
              if (l.key === descInfo.enterpriseCharacter) {
                return l.value;
              }
            })}/>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <DescriptionItem
            title="企业性质"
            content={selectOption.enterpriseNature.map((l) => (l.key === descInfo.enterpriseNature ? l.value : ''))}/>
        </Col>
        <Col span={12}>
          <DescriptionItem
            title="公司类型"
            content={selectOption.enterpriseType.map((l) => (l.key === descInfo.enterpriseType ? l.value : ''))}
          />
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <DescriptionItem
            title="行业分类"
            content={selectOption.industryClassification.map((l) => (l.key === descInfo.industryClassification ? l.value : ''))}
          />
        </Col>
        <Col span={12}>
          <DescriptionItem
            title="关联类型"
            content={selectOption.relationType.map((l) => (l.key === descInfo.relationType ? l.value : ''))}
          />
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <DescriptionItem
            title="是否上市"
            content={selectOption.listed.map((l) => (l.key === descInfo.listed ? l.value : ''))}
          />
        </Col>
        <Col span={12}>
          <DescriptionItem
            title="是否集团"
            content={selectOption.listed.map((l) => (l.key === descInfo.hasGroup ? l.value : ''))}
          />
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <DescriptionItem
            title="进出口权标识"
            content={selectOption.listed.map((l) => (l.key === descInfo.entranceFlag ? l.value : ''))}
          />
        </Col>
        <Col span={12}>
          <DescriptionItem
            title="经济类型"
            content={selectOption.economicType.map((l) => (l.key === descInfo.economicType ? l.value : ''))}
          />
        </Col>
      </Row>

      <Divider/>
      <p style={pStyle}>法人基本信息</p>
      <Row>
        <Col span={12}>
          <DescriptionItem title="企业法人" content={descInfo.legalName}/>
        </Col>
        <Col span={12}>
          <DescriptionItem title="手机号" content={descInfo.mobile}/>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <DescriptionItem title="邮箱" content={descInfo.email}/>
        </Col>
        <Col span={12}>
          <DescriptionItem
            title="证件类型"
            content={selectOption.identifyType.map((l) => (l.key === descInfo.identifyType ? l.value : ''))}
          />
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <DescriptionItem title="证件编号" content={descInfo.identifyNumber}/>
        </Col>

      </Row>

      <Divider/>
      <p style={pStyle}>银行账户信息</p>
      <Row>
        <Col span={12}>
          <DescriptionItem title="开户银行名称" content={descInfo.bankName}/>
        </Col>
        <Col span={12}>
          <DescriptionItem title="还款银行账户" content={descInfo.bankAccount}/>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <DescriptionItem title="银行卡归属地" content={descInfo.bankAttach}/>
        </Col>
        <Col span={12}>
          <DescriptionItem title="开户支行名称" content={descInfo.bankSubBranchName}/>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <DescriptionItem
            title="开户行许可证号"
            content={descInfo.bankPermissionCode}

          />
        </Col>
      </Row>
    </Drawer>;
  }
}

export default DrawerComponent;
